<div class="modal-header">
    <div class="modal-title">注册设备</div>
</div>
<form nz-form
      #f="ngForm"
      gutter="24"
      se-container="2"
      [labelWidth]="140">
    <nz-divider nzText="基本信息"
                style="font-size: 14px;color: #6e6e6e"
                [nzDashed]="true"
                nzOrientation="left"></nz-divider>
    <se label="设备标识"
        error="支持英文字母、数字和特殊字符-_@.:，长度限制4~32"
        required>
        <input nz-input
               required
               name="deviceId"
               [(ngModel)]="record.deviceId"
               minlength="4"
               maxlength="32"
               placeholder="输入设备唯一编号">
    </se>
    <se label="设备名称"
        required
        error="输入设备名称">
        <input nz-input
               required
               placeholder="输入设备名称(别名)"
               [(ngModel)]="record.deviceName"
               name="deviceName">
    </se>
    <se label="机器型号" required error="选择及其型号">
        <nz-select required name="deviceType" [(ngModel)]="record.productId" [nzPlaceHolder]="'请选择设备类别'"
                   [nzAllowClear]="true">
            <nz-option
                    *ngFor="let option of products$ | async"
                    [nzLabel]="option.name"
                    [nzValue]="option.id">
            </nz-option>
        </nz-select>
    </se>
    <se label="选择商家" required error="请选择一个商家">
        <nz-select [(ngModel)]="record.storeId" (nzScrollToBottom)="loadMore($event)"
                   (nzOnSearch)="storeOnSearch($event)"
                   nzPlaceHolder="选择商家"
                   required
                   name="storeId"
                   nzShowSearch
                   nzServerSearch
                   nzAllowClear>
            <nz-option *ngFor="let o of stores$ | async" [nzValue]="o.id" [nzLabel]="o.name"></nz-option>
        </nz-select>
    </se>

    <se label="单价">
        <nz-input-number name="price" nzPlaceHolder="输入单价" [(ngModel)]="record.price" [nzMin]="0"
                         [nzStep]="1"></nz-input-number>
    </se>

    <se label="库存">
        <nz-input-number name="stock" nzPlaceHolder="输入库存" [(ngModel)]="record.stock" [nzMin]="0" [nzMax]="200"
                         [nzStep]="1"></nz-input-number>
    </se>
    <nz-divider nzText="位置信息"
                style="font-size: 14px;color: #6e6e6e"
                [nzDashed]="true"
                nzOrientation="left"></nz-divider>
    <se label="选择地址" col="1" optionalHelp="从地图搜索设备所在地址">
        <nz-input-group [nzAddOnAfter]="addOnBeforeTemplate">
            <input type="text" nz-input [(ngModel)]="record.address.address" name="address" placeholder="从地图选择位置"
                   readonly>
            <ng-template #addOnBeforeTemplate>
                <a (click)="showMap()"> <i nz-icon nzType="environment" nzTheme="outline"></i></a>
            </ng-template>
        </nz-input-group>
    </se>

    <se col="1">
        <div class="modal-footer">
            <button nz-button
                    type="button"
                    (click)="close()">关闭
            </button>
            <button nz-button
                    type="submit"
                    [nzType]="'primary'"
                    (click)="save(f.value)"
                    [disabled]="!f.valid">保存
            </button>
        </div>
    </se>
</form>
